<template>
  <div>
    <v-data-table ref="xtable" :data='loadData' :columns='columns' :page-num="pageno" :page-size='10' :current-data.sync='mydata' @change="goTo">
      <template slot="th" scope="props">
        <strong v-if="props.column.field=='operate'">操作</strong>
        <strong v-else v-html="props.title"></strong>
      </template>
      <template slot="td" scope="props">
        <div v-if="props.column.field=='operate'">
          <v-button type="primary" size="small" @click="edit(props.item)">编辑</v-button>
          <v-button type="error" size="small" @click="destroy(props.item)">删除</v-button>
          <v-button type="error" size="small" @click="promission(props.item)">权限</v-button>
        </div>
        <span v-else v-html="props.content"></span>
      </template>
    </v-data-table>
    <br>
    <v-button @click="refreshTable">刷新表格</v-button>
    <v-button @click="reloadTable">重载表格</v-button>
  </div>
</template>

<script>
import { TableRoleList } from '@/data/table.js'
export default {
  name: 'role-list',
  data () {
    return {
      loadData (pramas) {
        let key = this.$route.params.system_key
        console.log(key)
        return this.$http.get(`rbac/role?pageNo=${pramas.pageNo}&pageSize=${pramas.pageSize}&system_key=${key}`).then(res => {
          return res.data
        })
      },
      mydata: [],
      pageno: 1,
      columns: []
    }
  },
  mounted () {
    this.columns = TableRoleList
  },
  methods: {
    refreshTable () {
      this.$refs.xtable.refresh()
    },
    reloadTable () {
      this.$refs.xtable.reload()
    },
    go2 () {
      this.$refs.xtable.goto(2)
    },
    goTo (data) {
      console.log(data)
    },
    promission (role) {
      let key = this.$route.params.system_key
      let id = role._id
      this.$router.push({name: 'SystemRolePermissions', params: {system_key: key, role_id: id}})
    },
    destroy (item) {
      this.$modal.confirm({
        title: '您是否确认要删除这项内容',
        content: '点确认 1 秒后关闭',
        onOk: async () => {
          await this.$http.get(`rbac/role/${item._id}/destroy`).then(res => {
            let data = res.data
            if (data.ret === 0) {
              this.$message.info(data.msg)
              this.$refs.xtable.refresh()
            }
          })
        },
        onCancel () {
          return new Promise(resolve => {
            setTimeout(resolve, 1000)
          })
        }
      })
    }
  }
}
</script>
